﻿@{
    ViewData["Title"] = "留言板";
}

<style>
    .divContent {
        margin: 10px auto;
        margin-top: 55px;
    }

    .blockContent {
        margin: 5px;
        padding: 10px;
        border: 1px dashed #808080
    }

    .button {
        margin: 5px;
        padding: 10px;
        border: 1px dashed #808080;
        font-size: 18px;
    }

    .pc {
        display: none;
    }

    .hiLabel {
        display: none;
    }
    /*PC*/
    @@media (min-width: 1025px) {
        .divContent {
            margin: 10px auto;
            margin-top: 55px;
            width: 700px
        }

        .pc {
            display: initial;
        }

        .nopc {
            display: none;
        }

        .hiLabel {
            display: initial;
        }
    }

    .spinner .spinner-icon {
        display: none;
    }
</style>

<div class="divContent">
    <div class="hiLabel" style="position:fixed;top:50px;left:100px;max-width:200px;max-height:400px;">

        <div style="text-align:center">
            <a target="_blank" href="http://job.haojima.net">
                <img src="~/images/job.jpg" title="找工作" />
            </a>
        </div>

        <div style="margin-top:10px;text-align:center">
            <a target="_blank" href="http://socket.haojima.net/">
                <img src="~/images/聊天.png" title="聊天室" />
            </a>
        </div>

        <div style="margin-top:10px;text-align:center">
            <a target="_blank" href="https://github.com/zhaopeiym/BlogDemoCode">
                <img src="~/images/github.jpg" title="源码" />
            </a>
        </div>
    </div>

    <div style="color:red;font-size:23px;font-weight:700;">
        Hi-Blogs，ASP.NET Core 正式启动。只为技术而技术！！！
    </div>
    <div style="padding-top: 7px;color: #A7A2A2;">将采用 阿里云 + .NET Core2.0 + CentOS7.3 + MySql5.6.37 + nginx1.12.1</div>

    <div style="margin-top:30px">
        <div class="pc">
            <form class="messgform">
                留言：<input type="text" name="msg" />
                大名：<input type="text" name="userName" />
                <input class="btnSave" type="button" value="弹一个~" />
            </form>
        </div>
        <div class="nopc" style="border:1px dashed #0094ff;padding:10px;margin:5px">
            <form>
                <div>留言：<input type="text" name="msg" /></div>
                <div style="margin-top:5px;margin-bottom:5px">大名：<input type="text" name="userName" /></div>
                <div><input class="btnSave" type="button" value="弹一个~" /></div>
            </form>
        </div>
    </div>

    <div class="messgContent" style="margin-top:30px">
        @{
            var messgs = ViewBag.Messgs as List<Message>;
            foreach (var messg in messgs)
            {
                <div class="blockContent">
                    <div>哪里：@messg.IP</div>
                    <div style="margin-top:3px">何人：@messg.UserName</div>
                    <div style="margin-top:3px">说点：@messg.Content</div>
                    <div style="margin-top:3px">何时：@messg.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")</div>
                </div>
            }
            if (messgs.Count >= 30)
            {
                <div class="button">加载中.....</div>
            }
        }

    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/moment/moment.js"></script>
<link href="~/lib/nprogress/nprogress.css" rel="stylesheet" />
<script src="~/lib/nprogress/nprogress.js"></script>
<script src="~/js/jsDes.js"></script>

<script type="text/javascript">

    var HtmlUtil = {
        /*1.用浏览器内部转换器实现html转码*/
        htmlEncode: function (html) {
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
            (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
            //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
            var output = temp.innerHTML;
            temp = null;
            return output;

        },
        /*2.用浏览器内部转换器实现html解码*/
        htmlDecode: function (text) {
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
            temp.innerHTML = text;
            //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;

        }
    };

    $(".btnSave").click(function () {

        var _this = this;
        $(_this).prop("disabled", true);
        $.ajax({
            url: "/Home/RecordMessges",
            type: "post",
            data: $(_this).closest("form").serialize(),
            success: function (sData) {
                location.reload(true);
            }
        });
    });

    var index = 1;
    var cont = 30;

    NProgress.configure({ ease: 'ease', speed: 400 });
    NProgress.configure({ minimum: 0.4 });
    NProgress.configure({ trickleRate: 0.13, trickleSpeed: 500 });

    window.onscroll = function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height() && $(".button").length) {
            NProgress.start();
            setTimeout(function () {
                $.ajax({
                    url: "/Home/GetData",
                    data: { "page": cont * index },
                    complete: function () {
                        NProgress.done();
                    },
                    success: function (sData) {
                        var tempHtml = "";
                        for (var i = 0; i < sData.length; i++) {
                            tempHtml += '<div class="blockContent">\
                                            <div>哪里：'+ sData[i].ip + '</div>\
                                            <div style="margin-top:3px">何人：'+ HtmlUtil.htmlDecode(sData[i].userName) + '</div>\
                                            <div style="margin-top:3px">说点：'+ HtmlUtil.htmlDecode(sData[i].content) + '</div>\
                                            <div style="margin-top:3px">何时：'+ moment(sData[i].createTime).format("YYYY-MM-DD HH:mm:ss") + '</div>\
                                        </div>';
                        }
                        index++;
                        $(".button").before(tempHtml);
                        if (sData.length < 30) {
                            $(".button").remove();
                        }
                    }
                });
            }, 700);//太快了效果不好看 >_<
        }
    }

</script>